<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主机管理</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="line-height: normal">
            <div style="text-align: center;">
                <div class="layui-inline" style="width: 200px">
                    <input class="layui-input" name="huowuDesc" id="huowuDesc" placeholder="别名\地址\端口\用户id" autocomplete="off">
                </div>

                <div class="layui-inline" style="line-height: normal;">
                    <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="huowuDesc-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status" lay-verify="" lay-filter="status" id="status" lay-search>
                            <option value="">请选择</option>
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>
    </div>
</div>
</body>
<div style="display: none" id="batchAdd"></div>
<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="status" value="{{d.id}}" title="启用" lay-filter="lockDemo" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script>
    //url 传参
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var a = decodeURI(window.location.search);
        var r = a.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return  unescape(r[2]); return null;
    }
</script>
<script type="text/html" id="caozuo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="tb">
    <div class="layui-container" style="margin-left:0px;">
        <a class="layui-btn layui-btn-xs" lay-event="add">新增主机</a>
        <a class="layui-btn layui-btn-xs" lay-event="addbase"><i class="layui-icon layui-icon-addition"></i>主机码新增</a>
<!--        <a class="layui-btn layui-btn-xs" lay-event="batchAdd"><i class="layui-icon layui-icon-addition"></i>批量导入车辆</a>-->
<!--        <a style="margin-left:30px;color: blue;text-decoration: revert;"  href="/admin/che_liang_guanli/mould/mould.xls">下载批量导入模板</a>-->
    </div>
</script>
<script src="/js/layui/layui.js"></script>
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>
<script>
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;
    var upload = layui.upload;
    table.render({
        elem: '#t',
        id: 'tt',
        toolbar: '#tb',
        // toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
        url: '/zhuji/selectzhuji',
        cols: [
            [{field: '',fixed: 'left', unresize: true,title: '序号',type:'numbers',align: 'center',width: 80}
                , {field: 'remarks', title: '主机别名', align: "center",width:160}
                , {field: 'address', title: '主机地址', align: "center",width:200}
                , {field: 'port', title: '主机端口', align: "center",width : 150}
                , {field: 'uid', title: '用户ID', align: "center",width:300}
                // , {field: 'type',title: '伪装类型', align: "center", templet:function(res){
                //     switch (res.type) {
                //         case 0:
                //             return "国内通国外";
                //             break;
                //         case 1:
                //             return "国外通国内";
                //             break;
                //         case 2:
                //             return "国内外互通";
                //             break;
                //         default:
                //             return ""
                //     }
                //
                // },width : 150}
                , {field: 'sy_lianjie_num', title: '已连接数', align: "center",width:100}
                , {field: 'lianjie_num', title: '最大连接数', align: "center",width:100}
                , {field: 'country_id', title: '所属国家', align: "center",width:150 ,templet:function(res){
                    if(res.area && res.area.country){
                        return res.area.country.country_zh_name;
                    }else {
                        return "";
                    }
                }}
                , {field: 'area_id', title: '所属区域', align: "center",width:150 ,templet:function(res){
                    if(res.area){
                        return res.area.area_zh_name;
                    }else {
                        return "";
                    }
                }}
                // , {field: 'time', title: '时间状态', align: "center",width:100,templet:function(res){
                //         if(res.end_time && new Date(res.end_time).getTime() > new Date().getTime()){
                //             return "正常";
                //         }else {
                //             return "已过期";
                //         }
                // }}
                // , {field: 'end_time', title: '到期时间', align: "center",width:200}
                , {field: 'out_id', title: '额外ID', align: "center",width:150}
                , {field: 'admin_id', title: '提交管理员ID', align: "center",width:150 ,templet:function(res){
                    if(res.admin){
                        return res.admin.username;
                    }else {
                        return "";
                    }
                }}
                ,{field:'status',align : 'center', title:'当前状态',width:120, templet: '#checkboxTpl', sort: true, fixed: 'right'}
                ,{fixed: 'right',title: '操作',align: 'center',toolbar: '#caozuo',width:170}
            ]
        ],
        limit:10,
        page: true,
        page: {

        },
        done: (res, curr, count) => {
            // console.log(res);
            layui.data("zhuji_page", {
                key: 'index',
                value: curr
            });
        }
    });

    var uploadInst = upload.render({
        elem: '#batchAdd'
        , url: "/cheliang/batchAddCar"
        , accept: "file",
        shade: [0.5,'#000'],
        exts: 'xls|xlsx|xlsm|xlt|xltx|xltm'
        , before: function (obj) {
            layui.layer.load();
            console.log("obj",obj);
        }
        , done: function (res) {
            if (res.code == 200) {
                layer.msg("导入成功！");
                table.reload("tt");
                var  index = layui.layer.load();
                layer.close(index);
            }
            else {
                layer.alert(res.data, {
                    icon: 2,
                    skin: 'layer-ext-demo'
                })
                var  index = layui.layer.load();
                layer.close(index);
            }

        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });

    //监听启用操作
    form.on('checkbox(lockDemo)', function(obj){
        var id = this.value;
        var status = obj.elem.checked;
        var zhuangtai;
        if(status){
            zhuangtai=1;
        }else{
            zhuangtai=0;
        }
        $.ajax({
            url:"/zhuji/upStatus"
            ,type:"get"
            ,data:{id:id,status:zhuangtai}
            ,contentType: 'application/json'
            ,success:function (data) {
                console.log(data);
                if(data.code==0){
                    layer.close(layer.index);
                    layer.msg(data.data);
                    table.reload("tt");
                }else if(data.code==1){
                    layer.msg(data.data);
                }else{
                    layer.msg('没有权限');
                }
            }
            ,error:function () {
                console.log("ajax error");
            }
        });
    });
    //监听工具条
    table.on('tool(t)', function (obj) {
        var data = obj.data;
        // console.log(data);
        if (obj.event === 'edit') {
            // console.log("点编辑了");
            layer.open({
                type: 2,
                area: ['100%', '100%'],
                content: (encodeURI("upd_zhuji.html?id="+data.id+"&remarks="+data.remarks+"&address="+data.address+"&port="+data.port+"&uid="+data.uid+"&out_id="+data.out_id+"&status="+data.status+"&end_time="+data.end_time+"&country_id="+data.country_id+"&area_id="+data.area_id+"&lianjie_num="+data.lianjie_num+"&version="+data.version+"&net="+data.net+"&wz_type="+data.wz_type)), //这里content是一个普通的String
                end: function(){
                    location.reload();
                }
            });
        }else if(obj.event === 'delete'){
            // 获取id
            var id= data.id;
            layer.confirm('您确定要删除吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.ajax({
                    url:'/zhuji/deleteZhuji',
                    type:'POST', //GET
                    async:true,    //或false,是否异步
                    data:{
                        id:id,
                    },
                    timeout:5000,    //超时时间
                    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    success:function(data){
                        console.log(data);
                        if(data.code==0) {
                            window.location.reload();
                            // 获得frame索引
                        }else {
                            layer.msg('删除失败');
                        }
                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    },
                    complete:function(){
                        //console.log('结束')
                    }
                })
            }, function(){
                // 事务回调
            });
        }else if(obj.event === 'huifu'){
            // 获取id
            var id= data.id;
            layer.confirm('您确定要恢复吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.ajax({
                    url:'/cheliang/huifucheliang',
                    type:'POST', //GET
                    data:{
                        id:id,
                    },
                    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    success:function(data){
                        console.log(data);
                        if(data.code==0) {
                            window.location.reload();
                            // 获得frame索引
                        }else {
                            layer.msg('恢复失败');
                        }
                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    },
                    complete:function(){
                        //console.log('结束')
                    }
                })
            }, function(){
                // 事务回调
            });
        }
    });
    table.on('toolbar(t)', function (obj) {
        var data = obj.data;
        if (obj.event === 'batchAdd') {
            $("#batchAdd").click();
        }else if(obj.event === 'addbase'){
            layer.prompt({
                formType: 2,
                value: '',
                title: '请输入主机base码',
                area: ['400px', '150px'],
                btn: ['确定','取消'], //按钮，
                btnAlign: 'c'
            }, function(value,index){
                $.ajax({
                    url:'/zhuji/zhuan_basema',
                    type:'POST', //GET
                    data:{
                        "text":value,
                    },
                    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    success:function(data){
                        if(data.code==0) {
                            layer.open({
                                type: 2,
                                area: ['100%', '100%'],
                                content: (encodeURI('add_zhuji.html?basema='+data.data)), //这里content是一个普通的String
                                end: function(){
                                    table.reload('tt');
                                }
                            });
                        }else {
                            layer.msg(data.msg);
                        }
                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    },
                    complete:function(){
                        //console.log('结束')
                    }
                })
            },function (value,index) {

            });
        }else if (obj.event === 'add') {
            layer.open({
                type: 2,
                area: ['100%', '100%'],
                content: 'add_zhuji.html', //这里content是一个普通的String
                end: function(){
                    table.reload('tt');
                }
            });
        }
    });
    //搜索
    form.on('submit(huowuDesc-search)', function (data) {
        var zhengjian_number = $("#status").find("option:selected").val();
        // console.log("库位ID："+kwID);
        table.reload('tt', {
            where: {"name": data.field.huowuDesc , "status": zhengjian_number}
            , page: {
                curr: 1
            }
        });
        return false;
    });

    form.on('select(status)', function(data){
        var kwID = data.value;
        var huowuDesc = $("#huowuDesc").val();
        table.reload('tt', {
            where: {"name": huowuDesc , "status": kwID}
            , page: {
                curr: 1
            }
        });
    });

    $('.test-table-operate-btn .layui-btn').on('click', function () {
        var type = $(this).data('type')
        active[type] ? active[type].call(this) : ''
    });

</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //日期范围
        var startDate=laydate.render({
            elem: '#start_time',
            type: 'datetime',
            max:"2099-12-31",//设置一个默认最大值
            done: function(value, date){
                endDate.config.min ={
                    year:date.year,
                    month:date.month-1, //关键
                    date: date.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                };
            }
        });
        var endDate= laydate.render({
            elem: '#end_time',//选择器结束时间
            type: 'datetime',
            min:"1970-1-1",//设置min默认最小值
            done: function(value,date){
                startDate.config.max={
                    year:date.year,
                    month:date.month-1,//关键
                    date: date.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                }
            }
        });
    });
</script>
<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>
</html>
